<script setup>
import {ref,onMounted} from 'vue'
// 引用pinia组件

import { getItemByid,editListApi } from '../api/list'
import {useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const name = ref('')
const price = ref('')

// 获取id
const id = route.params.id
// 回显数据
onMounted(async() => {
  const product = await getItemByid(id)
  name.value = product.name
  price.value = product.price
})
// 调用接口更新数据
const handleupdate = async ()=>{
 await editListApi(id,{"name":name.value,"price":price.value})

// 跳转到列表页面， 刷新页面
  router.push('/lists')

}


</script>

<template>
  <div class="edit-view">
    商品名称:<input type="text" v-model="name" />
    <br />
    售价:<input type="text" v-model="price" />
    <br />
    <button @click="handleupdate">更新</button>
  </div>
</template>

<style scoped>
  .edit-view {
  grid-gap: 10px;
  margin: 10px auto;
  padding: 20px;
  width: 300px;
  border:1px solid black;
  text-align: center;
  justify-items: center;
  background-color: #f5f5f5;
  font-size: 16px;
  line-height: 2em;
}

.edit-view button{
  margin-top:20px;
  padding: 0 10px;
  border: 1px solid black;
  border-radius: 5px;
}

</style>
